<template>
  <PageWrapper>
    <a-card :bordered="false">
      <BasicTable :loading="loading" :dataSource="dataSource" @register="registerTable" @expand="onExpand" />
    </a-card>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref } from "vue"
  import { defHttp } from "/@/utils/http/axios"
  import { PageWrapper } from "/@/components/Page"
  import { BasicTable, useTable } from "/@/components/Table"

  const url = "/mock/api/asynTreeList"

  const loading = ref<boolean>(false)
  const dataSource = ref<any[]>([])
  const [registerTable, { setLoading }] = useTable({
    rowKey: "id",
    bordered: true,
    canResize: false,
    // 树表格
    isTreeTable: true,
    showIndexColumn: true,
    columns: [
      { title: "名称", dataIndex: "name" },
      { title: "组件", dataIndex: "component" },
      { title: "排序", dataIndex: "orderNum" },
    ],
  })

  async function loadData(params) {
    loading.value = true
    let result = await defHttp.get({ url, params })
    loading.value = false
    return result.map((item) => {
      if (item.hasChildren) {
        return { ...item, children: [] }
      } else {
        return item
      }
    })
  }

  async function loadRootData() {
    dataSource.value = await loadData({ id: "0" })
  }

  loadRootData()

  async function onExpand(isExpand, rowData) {
    if (isExpand && rowData.hasChildren && rowData.children.length === 0) {
      rowData.children = await loadData({ id: rowData.id })
    }
  }
</script>
